<!doctype html>
<html lang="en" class="feedback">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>我要反馈</title>
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/feedback.css" />
		<style>
			*{
				margin: 0px;
				padding: 0px;
				border: 0px;
				font-family: "微软雅黑";
			}
		</style>
	</head>

	<body style="background-color: white;">
		<!--<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<button id="submit" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right">发送</button>
			<h1 class="mui-title">问题反馈</h1>
		</header>-->
		<div class="mui-content" style="background-color: white;">
			<div class="mui-content-padded">
				<div class="mui-inline" style="color: #303030; font-size: 16px;">问题和意见</div>
				<a class="mui-pull-right mui-inline" href="#popover" style="color: #303030; font-size: 16px;">
					快捷输入
					<span class="mui-icon mui-icon-arrowdown"></span>
				</a>
				<hr style="width: 100%; height: 1px; background-color: #DCDCDC; margin-top: 15px;" />
				<!--快捷输入具体内容，开发者可自己替换常用语-->
				<div id="popover" class="mui-popover">
					<div class="mui-popover-arrow"></div>
					<div class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<ul class="mui-table-view" style="font-size: 15px; color: #303030;">
								<!--仅流应用环境下显示-->
								<li class="mui-table-view-cell stream">
									<a href="#">桌面快捷方式创建失败</a>
								</li>
								<li class="mui-table-view-cell"><a href="#">界面显示错乱</a></li>
								<li class="mui-table-view-cell"><a href="#">启动缓慢，卡出翔了</a></li>
								<li class="mui-table-view-cell"><a href="#">偶发性崩溃</a></li>
								<li class="mui-table-view-cell"><a href="#">UI无法直视，丑哭了</a></li>
							</ul>
						</div>
					</div>

				</div>
			</div>
			<div class="row mui-input-row">
				<textarea id="txtQuestion" class="mui-input-clear question" placeholder="请详细描述你的问题和意见..." style="font-size: 15px; color: #303030; font-family: '微软雅黑';"></textarea>
			</div>
			<hr style="width: 100%; height: 1px; background-color: #DCDCDC; margin-top: 15px;" />
			<!--<p>图片(选填,提供问题截图,总大小10M以下)</p>
			<div id='image-list' class="row image-list"></div>-->
			<p style="color: #303030; font-size: 16px;">QQ/邮箱</p>
			<div class="mui-input-row">
				<input id="iptContact" type="text" class="mui-input-clear contact" placeholder="(选填,方便我们联系你 )" />
			</div>
			<hr style="width: 100%; height: 1px; background-color: #DCDCDC; margin-top: 15px;" />
			<div class="mui-content-padded">
				<div class="mui-inline" style="color: #303030; font-size: 16px;">应用评分</div>
				<div class="icons mui-inline" style="margin-left: 6px;">
					<i data-index="1" class="mui-icon mui-icon-star"></i>
					<i data-index="2" class="mui-icon mui-icon-star"></i>
					<i data-index="3" class="mui-icon mui-icon-star"></i>
					<i data-index="4" class="mui-icon mui-icon-star"></i>
					<i data-index="5" class="mui-icon mui-icon-star"></i>
				</div>
			</div><br />
			<div style="margin-top: 20px; text-align: center;">
				<button id="btnSaveFeedbook" style="background-color: #00A8C6; width: 50%; height: 40px; font-size: 17px; color: white;">提交</button>
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/utils/http.utils.js"></script>
		<!--<script src="../../js/feedback.js" type="text/javascript" charset="utf-8"></script>-->
		<script type="text/javascript">
			mui.init();
			mui('.mui-scroll-wrapper').scroll();
			var starIndex = 0;
			
		    //应用评分
			mui('.icons').on('tap','i',function(){
			  	var index = parseInt(this.getAttribute("data-index"));
			  	var parent = this.parentNode;
			  	var children = parent.children;
			  	if(this.classList.contains("mui-icon-star")){
			  		for(var i=0;i<index;i++){
		  				children[i].classList.remove('mui-icon-star');
		  				children[i].classList.add('mui-icon-star-filled');
			  		}
			  	}else{
			  		for (var i = index; i < 5; i++) {
			  			children[i].classList.add('mui-icon-star')
			  			children[i].classList.remove('mui-icon-star-filled')
			  		}
			  	}
			  	starIndex = index;
		    });
		    
		  	//选择快捷输入
			mui('.mui-popover').on('tap','li',function(e){
				document.getElementById("txtQuestion").value = "";
			    document.getElementById("txtQuestion").value = document.getElementById("txtQuestion").value + this.children[0].innerHTML;
			    mui('.mui-popover').popover('toggle')
			}); 
			var $currUser = JSON.parse(localStorage.getItem("login-user-parent"));
			document.getElementById("btnSaveFeedbook").addEventListener("tap", function(){
				var $question = document.getElementById("txtQuestion").value;
				var $Contact = document.getElementById("iptContact").value;
				var $soure = starIndex;
				mui.ajax({
					url : $request_url.addFeedback,
					type: "post",
					headers: {
						"Authorization": $headers_authorization
					},
					data: {
						userId: $currUser.userId,
						content : $question,
						contact : $Contact,
						grade : $soure
					},
					dataType: "json",
					success: function(dat) {
						if(dat.code == 0){
							mui.alert("感谢你的反馈，我们会及时处理滴!");
							mui.openWindow({
								url : "my-index.html"
							});
						} else {
							mui.toast(dat.message);
						}
					}, error : function(err){
						mui.toast("服务繁忙...");
					}
				});
			});
		</script>
	</body>

</html>